<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <script src="/static/js/mui.min.js"></script>
    <link href="/static/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/static/dist/css/sm.min.css">
    <link rel="stylesheet" href="/static/dist/css/sm-extend.min.css">
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
    <style>
        button {
            float: left;
        }

        .inline-card {
            display: inline;
        }

        .mui-checkbox.mui-left input[type=checkbox], .mui-radio.mui-left input[type=radio] {
            left: 5px;
        }

        .mui-checkbox input[type=checkbox], .mui-radio input[type=radio] {
            right: 10px;
        }


    </style>
</head>
<body>
<div class="page">
    <header class="mui-bar mui-bar-nav">
        <h1 class="title">{{ unit_name }}</h1>
        <button class="mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"
                onclick="window.location.href='/unit_list'"><span
                class="mui-icon mui-icon-left-nav"></span>首页
        </button>
        <button class="mui-btn mui-btn-link batch-del-button" style="float:right;"><span
                class="mui-icon batch-delete"></span>批量删除
        </button>

        <button class="mui-btn mui-btn-link confirm-del-button" style="float:right" hidden><span
                class="mui-icon confirm-delete"></span>删除
        </button>
        <button class="mui-btn mui-btn-link cancel-del-button" style="float:right;margin-right: 10px" hidden><span
                class="mui-icon cancel-delete"></span>取消
        </button>
    </header>
    <nav class="bar bar-tab">
        <a class="tab-item" href="/index">
            <span class="mui-icon mui-icon-flag"></span>
            <span class="tab-label">刷词模式</span>
        </a>
        <a class="tab-item" href="/unit_list">
            <span class="mui-icon mui-icon-bars"></span>
            <span class="tab-label">看词模式</span>
        </a>
        <a class="tab-item" href="/add_word_page">
            <span class="mui-icon mui-icon-compose"></span>
            <span class="tab-label">添加单词</span>
        </a>
    </nav>
    <div class="content">
        <br/>
        <br/>
        <div class="mui-content">
            <div class="mui-input-row mui-checkbox mui-left select-all-div" style="height: 40px;margin-left: 25px"
                 hidden>
                <label style="padding-left: 40px;padding-bottom: 5px">全选</label>
                <input name="select-all" id="select-all" value="110" type="checkbox">
            </div>

            {% for word_tuple in words %}
                <div class="inline-card">

                    <div class="mui-card" itemid="{{ forloop.counter0 }}">
                        <br>
                        <h4 class="word_detail" style="text-align: center">{{ word_tuple.0 }}</h4>
                        <br>
                        <br>
                        <div class="mui-card-footer">
                            <div class="mui-input-row mui-checkbox mui-left delete-select" style="height: 30px" hidden>
                                <label></label>
                                <input name="selected-word" value="Item 2" type="checkbox">
                            </div>

                            <a><span class="mui-icon mui-icon-trash delete-word"
                                     style="color: #f46052"></span></a>
                            <a id="icon-star" class="">
                                {% if word_tuple.1 == '1' %}
                                    <span class="mui-icon mui-icon-star-filled collect"
                                          style="color: orange"></span></a>
                                {% else %}
                                    <span class="mui-icon mui-icon-star collect"
                                          style="color: #7f7f7f"></span></a>
                                {% endif %}
                        </div>
                    </div>
                </div>

            {% endfor %}
        </div>
    </div>


</body>
<script src='//cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>
<script src='/static/dist/js/sm.js'></script>
<script src='/static/dist/js/sm-extend.js'></script>
<script src='/static/dist/layer/layer.js'></script>

<script>
    function open_unit(idx) {
        window.location.href = "/unit_words?index" + idx;
    }

    $(function () {
        $("#select-all").click(function () {
            console.log("yep");
            if (this.checked) {
                $("input[name='selected-word']").prop("checked", true);
            } else {
                $("input[name='selected-word']").prop("checked", false);
            }
        });

        $(".confirm-del-button").click(function () {
            let checked_words = getDeleteWords();
            if (checked_words.length === 0) {
                mui.toast("还没有选择")
            } else {
                let unit_name = $("h1").text();
                let index_str = checked_words.join(",");
                let btnArray = ['否', '是'];
                mui.confirm('确认删除？', 'FBI warning', btnArray, function (e) {
                    if (e.index === 1) {
                        $.ajax({
                            url: "/delete_word?index=" + index_str + "&unit_name=" + unit_name,
                            method: "GET",
                            async: false,
                            success: function () {
                                removeComp(checked_words);
                                cancel_del();
                                mui.toast("删除成功");
                            }
                        })
                    } else {
                        console.log("cancel");
                    }
                })
            }
        });

        function removeComp(index_list) {
            let cursor = 0;
            $(".mui-card").each(function (index, item) {
                if ($(this).attr("itemid") === index_list[cursor]) {
                    $(this).remove();
                    cursor++;
                }
            });
        }

        function getDeleteWords() {
            let checked_words = [];
            let idx = 0;
            $("input[name='selected-word']").each(function (index, item) {
                if ($(this).is(":checked")) { //判断是否选中
                    console.log($(this).parent().parent().parent().parent());
                    checked_words[idx++] = $(this).closest(".mui-card").attr("itemid");
                }
            });
            return checked_words;
        }

        $(".batch-del-button").click(function () {
            $(this).hide();
            $(".cancel-del-button").show();
            $(".confirm-del-button").show();
            $(".delete-select").show();
            $(".delete-word").hide();
            $(".select-all-div").show();
        });
        $(".cancel-del-button").click(function () {
            cancel_del();
        });

        function cancel_del() {
            $(".cancel-del-button").hide();
            $(".confirm-del-button").hide();
            $(".batch-del-button").show();
            $(".delete-select").hide();
            $(".delete-word").show();
            $(".select-all-div").hide();
        }

        $(".word_detail").click(function () {
            let word = $(this).text();
            window.location.href = "https://m.youdao.com/dict?q=" + word + "&le=eng";
        });

        $(".collect").click(function () {
            let unit_name = $("h1").text();
            let word = $(this).parent().parent().parent().children("h4").text();
            let this_com = $(this);
            if ($(this).hasClass("mui-icon-star")) {
                {# 收藏 #}
                $.ajax({
                    url: "/star_word?word=" + word + "&unit_name=" + unit_name,
                    method: "GET",
                    success: function () {
                        this_com.removeClass("mui-icon-star");
                        this_com.addClass("mui-icon-star-filled");
                        this_com.attr("style", "color: orange");
                        mui.toast("收藏成功");
                    }
                })
            } else {
                {# 取消收藏 #}
                $.ajax({
                    url: "/cancel_star_word?word=" + word,
                    method: "GET",
                    success: function () {
                        this_com.removeClass("mui-icon-star-filled");
                        this_com.addClass("mui-icon-star");
                        this_com.attr("style", "color: #7f7f7f");
                        mui.toast("取消收藏成功");
                    }
                })
            }
        });

        $(".delete-word").click(function () {
            {# 删除 #}
            let unit_name = $("h1").text();
            let this_com = $(this);
            let index = $(this).closest(".mui-card").attr("itemid");
            console.log(index);
            let btnArray = ['否', '是'];
            mui.confirm('确认删除？', 'FBI warning', btnArray, function (e) {
                if (e.index == 1) {
                    $.ajax({
                        url: "/delete_word?index=" + index + "&unit_name=" + unit_name,
                        method: "GET",
                        success: function () {
                            this_com.closest(".mui-card").remove();
                            mui.toast("删除成功");
                        }
                    })
                } else {

                }
            })

        });
    });
</script>
</html>